import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { Skeleton, message } from 'antd';
import Header from "../../components/Header/Header.tsx";
import { listReadingRoom } from '../../api/readingRoomController';

interface ReadingRoomData {
  id: string;
  roomname: string;
  imageurl: string;
  description: string;
  openinghours: string;
  currentcount: number;
  totalseats: number;
  seatstatus: string;
  createtime: string;
  updatetime: string;
  isdelete: number;
}

const ReadingRoom: React.FC = () => {
  const navigate = useNavigate();
  const [loading, setLoading] = useState(true);
  const [readingRooms, setReadingRooms] = useState<ReadingRoomData[]>([]);

  useEffect(() => {
    fetchReadingRooms();
  }, []);

  const fetchReadingRooms = async () => {
    try {
      const response = await listReadingRoom();
      if (response.code === 200 && response.data) {
        setReadingRooms(response.data);
      } else {
        message.error('获取阅览室列表失败');
      }
    } catch (error) {
      message.error('获取阅览室列表失败');
    } finally {
      setLoading(false);
    }
  };

  const handleRoomClick = (roomId: number) => {
    navigate(`/reading-room/${roomId}`);
  };

  const SkeletonCard = () => (
    <div className="bg-white rounded-lg shadow-md overflow-hidden transform transition-transform hover:scale-105">
      <div style={{ paddingTop: '61.5%' }} className="relative w-full">
        <Skeleton.Image 
          className="absolute top-0 left-0 w-full h-full" 
          active 
          style={{ width: '100%', height: '100%' }} 
        />
      </div>
      <div className="p-4">
        <Skeleton.Input style={{ width: '60%' }} active size="large" />
        <div className="flex justify-between mt-2">
          <Skeleton.Input style={{ width: '40%' }} active />
          <Skeleton.Input style={{ width: '40%' }} active />
        </div>
      </div>
    </div>
  );

  return (
    <div className="min-h-screen flex flex-col">
      <Header />
      <div className="flex-1 overflow-auto">
        <div className="max-w-[1400px] mx-auto px-4 py-8">
          <h1 className="text-3xl font-bold mb-8">阅览室</h1>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {loading ? (
              // 骨架屏
              <>
                {[1, 2, 3, 4].map((item) => (
                  <SkeletonCard key={item} />
                ))}
              </>
            ) : (
              readingRooms.map((room) => (
                <div
                  key={room.id}
                  className="bg-white rounded-lg shadow-md overflow-hidden cursor-pointer transform transition-transform hover:scale-105"
                  onClick={() => handleRoomClick(Number(room.id))}
                >
                  <div className="aspect-w-34 aspect-h-9">
                    <img
                      src={room.imageurl}
                      alt={room.roomname}
                      className="w-full h-full object-cover"
                    />
                  </div>
                  <div className="p-4">
                    <h2 className="text-xl font-semibold mb-2">{room.roomname}</h2>
                    <div className="flex justify-between text-gray-600">
                      <span>当前人数: {room.currentcount}</span>
                      <span>总座位: {room.totalseats}</span>
                    </div>
                    <div className="mt-2 text-sm text-gray-500">
                      {room.openinghours}
                    </div>
                  </div>
                </div>
              ))
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default ReadingRoom; 